<template>
    <!-- html结构 -->
    <div class="person">
        <h1>情况二：监视【ref】定义【对象类型】数据</h1>
        <!-- 注意：
·若修改的是ref定义的对象中的属性，newValue和oldValue都是新值，因为它们是同一个对象。
·若修改整个ref定义的对象，newValue是新值，oldValue是旧值，因为不是同一个对象了。 -->
        <h2>姓名：{{person.name  }}</h2>
        <h2>年龄{{ person.age }}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changePerson">修改整个对象</button>

    </div>
</template>
<script setup lang="ts" name="Person">
import { ref, watch } from 'vue';

    let person=ref({
        name:'张三',
        age:18

    })
    function changeName() {
        person.value.name+='~'
    }
    function changeAge() {
        person.value.age+=1
    }
    function changePerson() {
        person.value={
            name:'王五',
            age:20
        }
    }
    // 此时监听的是person对象的地址值变化，若要监视内部属性，需要手动开启深度监听
    // watch()的参数依次是被监听的数据，监听的回调，配置对象
    watch(person,(oldPerson,newPerson)=>{
        console.log('person被修改了',oldPerson,newPerson);
        

    },{deep:true,immediate:true})
    // deep:true,是可以实现深层次监听，immediate:true立即执行监听即无论是否改变第一次监听，都会执行

</script>

<style scoped>
.person {
    background-color: #6cf;
    box-shadow: 0 0 10px #000;
    border-radius: 10px;
    padding: 10px;
}
</style>